{% csrf_token %}
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>


    <title>职业画像</title>
    <link rel="stylesheet" href="{% static 'css/commom.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">

</head>
<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid RGB(97, 48, 218);
        width: 500px;
        border-radius: 6px;
        height: 250px;
    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 25px;
        top: 17px;
        left: 0px;
        background-color: RGB(97, 48, 218);
    }

    }
    .circle1, .circle2, .circle3 {
        position: absolute;
        top: 18px;
        right: 5px;
        width: 15px;
        height: 15px;
        border-radius: 50%;


    }

    .circle1 {
        position: absolute;
        top: 22px;
        right: 20px;
        background-color: RGB(245, 189, 187)
    }

    .circle2 {
        position: absolute;
        top: 22px;
        right: 45px;
        background-color: RGB(255, 255, 255)
    }

    .circle3 {
        position: absolute;
        top: 22px;
        right: 70px;
        background-color: RGB(255, 159, 89)

    }

    .modal-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .modal-close:hover,
    .modal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-body {
        width: 350px;
        margin: 0 auto;
        margin-top: 50px;

    }

    .modal-body button {
        display: block;
        width: 166px;
        margin: 0 auto;
        margin-top: 30px;
        border-radius: 5px;
    }

    .modal-name {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 14px;
        color: RGB(51, 51, 51);
    }

    #inputText {
        border: 1px solid RGB(97, 48, 218);
        border-radius: 5px;
    }

    .modal-body input[type="text"] {
        width: 100%;
        padding: 10px;
        margin-bottom: 1px;
    }

    .modal-body button {
        padding: 10px 20px;
        background-color: #5725bc;
        color: white;
        border: none;
        cursor: pointer;
    }

    .modal-body button:hover {
        background-color: #5725bc;
    }
</style>
<body style="background: RGB(237, 242, 247);"><!--页头-->
<div id="headCon " class="clearfix:after clearfix">
    <div class="w">
        <div class="logo">
            <image src="{% static 'image/u9.png' %}"></image>
        </div>
        <div class="Nav">
            <a href="http://175.178.101.10/" class="link">首页</a>
<a href="http://175.178.101.10/static/ss/zhi.html" class="link" >人才推荐</a>
                 <a href="http://175.178.101.10/static/ss/course.html" class="link" id="link1">精品课程</a>
                <a href="" class="link" id="link2">创新技术</a>
                <a href="" class="link" id="link3">产品定价</a>
                <a href="" class="link" id="link4">关于我们</a>
            {% if request.user.is_authenticated %}
                <a href="{% url 'users:userinfo' %}"><button onclick="document.href='{% url 'users:userinfo' %}'" class="btn">
                    {{ request.user.username|slice:":5" }}
                </button></a>

            {% else %}

                    <a href="{% url 'users:login' %}">
                        <button onclick="document.href='{% url 'users:login' %}'" class="btn">登录 </button>
                    </a>


            {% endif %}
        </div>
    </div>
</div>


<div class="w">
    <div class="row">
        <li class="list">

            <image src="{% static 'image/u11.jpg' %}"></image>

            <span>CSDN</span>
            <button class="btn1" id="csdn">
                点击授权
            </button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/u142.png' %}"></image>
            </div>
            <span>知乎</span>
            <button class="btn1" id="zhihu">点击授权</button>
        </li>
        <li class="list">
            <div>
                <image src="{% static  'image/jianshu.png'%}"></image>
            </div>
            <span>简书</span>
            <button class="btn1" id="jbook">点击授权</button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/u140.png' %}"></image>
            </div>
            <span>bilibili</span>
            <button class="btn1" id="bilibili">点击授权
            </button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/u55.png' %}"></image>
            </div>
            <span>贴吧</span>
            <button class="btn1 "
            >
                点击授权
            </button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/music.png' %}"></image>
            </div>
            <span>网易云</span>
            <button class="btn1" id="cloudmusic">
                点击授权
            </button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/R-C.png' %}"></image>
            </div>
            <span>力扣</span>
            <button class="btn1" id="leetcode">点击授权
            </button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/u66.png' %}"></image>
            </div>
            <span>github</span>
            <button class="btn1" id="github">点击授权</button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/u124.png' %}"></image>
            </div>
            <span>豆瓣</span>
            <button class="btn1" id="douban"
            >点击授权
            </button>
        </li>
        <li class="list">
            <div>
                <image src="{% static 'image/u125.png' %}"></image>
            </div>
            <span>微博</span>
            <button class="btn1" id="weibo"
            >
                点击授权
            </button>
        </li>
    </div>
</div>
<div class="w">
    <div class="row2">
        <div class="col1">
            <image src="{% static 'image/u7.png' %}"></image>
            <image src="{% static 'image/u7.png' %}"></image>
        </div>
        <div class="col2" id="#app">
            <form enctype="multipart/form-data" method="post" action="/cvanalyze/"m100


		    >

                <div class="row3">
{#                    <image src=""></image>#}
                    <a class="btn2" href='{% url 'questionnaire:start_test' %}'>自我评估</a>
                    <a class="btn2" href='{% url 'contents:perfect_info' %}'>完善信息</a>
                    {% csrf_token %}
                    <label for="pdffile" class="btn2">简历上传</label>
                    <input  name="pdffile" type="file" id="pdffile" style="display: none;" value="">
                    {#                      <button type="" class="btn2">上传pdf简历</button>#}
                </div>
               <!DOCTYPE html>
<html>
<head>
  <style>
    /* 样式用于弹窗 */
    .loading-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      text-align: center;
      padding: 20px;
      z-index: 999;
    }
  </style>
</head>
<body>
  <div class="row4">
    <input type="submit" class="btn3" value="职业画像" onclick="showLoadingPopup()">
  </div>

  <div class="loading-popup" id="loadingPopup">
    正在分析数据...
  </div>

  <script>
    function showLoadingPopup() {
      // 显示加载弹窗
      var loadingPopup = document.getElementById("loadingPopup");
      loadingPopup.style.display = "block";

      // 模拟页面跳转，这里使用setTimeout模拟，实际应根据你的需求进行修改
      setTimeout(function() {
        // 模拟页面跳转，可以使用 window.location.href = '目标页面的URL' 进行实际页面跳转
        // 这里的 setTimeout 模拟页面跳转后，隐藏加载弹窗
        hideLoadingPopup();
      }, 100000); // 这里的2000表示模拟的加载时间，可以根据实际情况修改
    }

    function hideLoadingPopup() {
      // 隐藏加载弹窗
      var loadingPopup = document.getElementById("loadingPopup");
      loadingPopup.style.display = "none";
    }
  </script>
</body>
</html>

            </form>

        </div>
    </div>
</div>

<style>

</style>
<div id="modal" class="modal">
    <div class="modal-content">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <!--<span class="modal-close"  >&times;</span>-->

        <div class="modal-body">
            <span class="modal-name">请输入你的b站id</span>
            <input id="inputText" type="text" placeholder="请输入">
            <button id="modal-btn" data-url="" data-idName="">确定</button>
        </div>
    </div>
</div>

</body>
<script src="{% static 'js/axios-0.18.0.min.js' %}"></script>
<script>
    function showModal(url, paramName, event) {
        // 显示模态框
        $('#modal').show();
        $('#modal-btn').attr("data-url", url);
        $('#modal-btn').attr("data-idName", $(event.target).prop("id"));

        // 将按钮文本修改为“已授权”
        $('.modal-name').text('请输入你的' + paramName + 'id');

        return true
    }
    $('#pdffile').change(function() {
    let url='/cvanalyze/'
    let formData = new FormData();
    formData.append('pdffile', $('#pdffile')[0].files[0]);
    var csrftoken = $('[name=csrfmiddlewaretoken]').val();

// 设置axios的默认请求头
    axios.defaults.headers.common['X-CSRFToken'] = csrftoken;
    axios.post(url, formData,{
  headers: {
    'X-CSRFToken': csrftoken
  }
})
                    // 请求成功  function(response){}
                    .then(response => {
                        // console.log(this);
                        // console.log(response.data);
                        // alert(response.data.count);
                        if (response.data.count === 1){
                            // 用户名已经存在
                            this.error_name_message = '用户名已经存在';
                            this.error_name = true;
                            // alert(this.error_name);
                        }else {
                            this.error_name = false
                        }
                    })
                    // 请求不成功
                    .catch(error => {
                        console.log(error.response)
                    })
});


    function closeModal() {
        // 隐藏模态框
        $('#modal').hide();
    }

    function submitModal() {
        console.log("执行")
        var url = $('#modal-btn').attr("data-url");
        var idName = $('#modal-btn').attr("data-idName");

        var inputText = $('#inputText').val(); // 获取输入的文本

        $('#inputText').val("");//清除文本
        $('#' + idName).text('已授权');
        // 发送AJAX请求到后端
        $.ajax({
            url: url, // 替换为实际的后端URL
            method: 'GET', // 使用适当的HTTP方法
            data: {
                key1: inputText
            }, // 将输入的文本作为数据传递
            success: function (response) {
                // 处理后端返回的响应
                console.log('AJAX请求成功', response);
                closeModal(); // 关闭模态框

                // 打开新窗口访问指定的URL
                {#window.open(url);#}
            },
            error: function (xhr, status, error) {
                // 处理AJAX请求期间发生的任何错误
                console.error('AJAX请求错误', status, error);
                closeModal(); // 关闭模态框

            }
        });
    }

    $(document).mouseup(function (e) {
        var container = $(".modal-content");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            closeModal(); // 关闭模态框
        }
    });


    // 监听按钮点击事件
    $('#bilibili').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=bilibili", "b站", event);

    });


    $('#zhihu').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=zhihu", "知乎", event)

    });

    $('#weibo').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=weibo", "微博", event)

    });

    $('#douban').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=douban", "豆瓣", event)

    });

    $('#github').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=github", "github", event)

    });


    $('#leetcode').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=leetcode", "leetcode", event)

    });


    $('#cloudmusic').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=cloudmusic", "网易云", event)

    });
    $('#csdn').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=csdn", "CSDN", event)

    });
    $('#jbook').click(function (event) {
        showModal("{% url 'contents:getinfo' %}"+"?scrapyweb=jbook", "jbook", event)

    });
    $('#modal-btn').click(function (event) {
        submitModal()
    })

</script>

<script src="{% static 'js/vue.min.js' %}"></script>



</html>

